<template>
  <div class="popover">
    <el-dialog
      title="题目预览"
      :visible.sync="dialogShow"
      width="47%"
      @close="$emit('input',false)"
    >
      <div>
        <span class="tanspan">
          【题型】:
          <span v-if="lists.questionType==1">单选</span>
          <span v-else-if="lists.questionType==2">多选</span>
          <span v-else>简答</span>
        </span>
        <span class="tanspan">【编号】:{{lists.id}}</span>
        <span class="tanspan">【难度】:
          <span v-if="lists.difficulty==1">简单</span>
          <span v-else-if="lists.difficulty==2">一般</span>
          <span v-else>困难</span>
        </span>
        <span class="tanspan">【标签】:{{lists.tags}}</span>
        <span class="tanspan">【学科】:{{lists.subjectName}}</span>
        <span class="tanspan">【目录】:{{lists.directoryName}}</span>
        <span class="tanspan">【方向】:{{lists.direction}}</span>
      </div>
      <el-divider></el-divider>
      <div>
        <span>【题干】:</span>
        <div
          v-html="lists.question"
          class="cctv"
        ></div>
        <div v-if="lists.questionType==1">
          单选题 选项：（以下选中的选项为正确答案）
          <div class="wads">
            <el-radio
              :value="item.isRight"
              :label="1"
              v-for="(item) in lists.options"
              :key="item.id"
            >{{item.code}}</el-radio>
          </div>
        </div>
        <div v-else-if="lists.questionType==2">
          多选题 选项：（以下选中的选项为正确答案）
          <div>
            <el-checkbox-group
              v-model="checkList"
              v-for="(item) in lists.options"
              :key="item.id"
            >
              <el-checkbox
                :label="item.id"
                :checked='item.isRight == 1 ? true : false '
              >{{item.title}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <el-divider></el-divider>
        <div>
          <span>【参考答案】:</span>
          <el-button
            type="danger"
            size="small"
            @click="divvideo=true"
          >视频答案预览</el-button>
          <!-- 视频隐藏 -->
          <div v-if="divvideo">
            <video
              autoplay
              muted
              class="shipin"
              :src="lists.videoURL"
            ></video>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <span>【答案解析】: <div v-html="lists.answer"></div></span>
      <el-divider></el-divider>
      <span>【题目备注】:</span>

      <!-- 关闭按钮 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="right"
          type="primary"
          @click="dialogShow = false"
        >关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'

export default {
  // 组件名称
  name: 'Popover',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    value: {
      type: Boolean,
      required: true
    },
    idshow: {
      type: Object,
      required: true
    }
  },
  // 组件状态值
  data () {
    return {
      dialogShow: true,
      lists: '',
      divvideo: false,
      // radio: 1,
      checkList: []
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {
    this.getList()
  },
  // 组件方法
  methods: {
    async getList () {
      const { data } = await detail({ id: this.idshow.id })
      this.lists = data
      console.log(this.lists)
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-footer {
  position: relative;
  left: 400px;
  bottom: 0;
}
.tanspan {
  display: inline-block;
  width: 200px;
  margin-top: 20px;
}
.el-radio {
  margin-top: 8px;
}
.shipin {
  height: 300px;
  width: 500px;
  background-color: #000;
}
.cctv {
  color: blue;
}
.wads {
  display: flex;
  flex-direction: column;
}
</style>
